<!--
 * @Description: 减脂营编辑按钮
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-05-12 11:25:18
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-13 11:42:11
 -->
<template>
  <div>
    <el-button size="small" type="success" style="margin-top: 5px;" @click="to">批量拉取订单</el-button>
    <el-dialog title="选择订单进入减脂营" :visible.sync="dialog" width="1000px">
      <el-select v-permission="['ADMIN']" v-model="query.principal" filterable size="small" placeholder="请选择营养师" class="user-input-camp"  style="width:160px">
        <el-option v-for="item in principals" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="query.order_type" size="small" placeholder="订单分类" class="user-input-camp" style="width:160px">
        <el-option v-for="(item, index) in typesOptions" :key="index" :label="item" :value="index"></el-option>
      </el-select>
      <el-date-picker v-model="datepicker" type="daterange" size="small" start-placeholder="开始时间" end-placeholder="结束时间" class="user-input-camp" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width:260px" />
      <el-button type="primary" size="small" class="el-icon-search" @click="toQuery">搜索</el-button>
      <el-button size="small" class="el-icon-q" @click="repeal">撤销</el-button>
      <el-button size="small" class="el-icon-q" @click="batchPullService">批量导入</el-button>

      <el-table :data="tableData" border height="350" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="40" />
        <el-table-column prop="id" label="订单ID" width="80" />
        <el-table-column prop="number" label="序号" width="100" />
        <el-table-column prop="nick_name" label="微信名" width="120" />
        <el-table-column prop="delivery_name" label="真实姓名" />
        <el-table-column prop="service_day" label="服务周期" width="150" />
        <el-table-column prop="status_text" label="状态" />
        <el-table-column prop="order_remark" label="备注" />
      </el-table>

      <el-pagination
        :current-page.sync="query.page"
        :page-size="query.limit"
        :total="total"
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange" />
    </el-dialog>
  </div>
</template>
<script>

export default {
  props: {
    campId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      query: {
        principal: '',
        order_type: '',
        start: '',
        end: '',
        page: 1,
        limit: 20,
      },
      total: 0,
      dialog: false,
      tableData: [],
      datepicker: [],
      principals: [],
      typesOptions: [],
      serviceIds: [],
    }
  },
  methods: {
    to() {
      this.initParams()
      this.dialog = true
      this.toQuery()
    },
    toQuery() {
      if (this.datepicker.length > 0) {
        this.query.start = this.datepicker[0]
        this.query.end = this.datepicker[0]
      }
      this.$api.order.camp
        .getNoCampService({
          params: this.query
        }).then(res => {
          this.tableData = res.data.list
          this.total = res.data.total
        }).catch(err => {
          console.log(err)
        })
    },
    initParams() {
      //获取当前管理员的部门成员信息
      this.$api.permission.user
        .getSubordinate()
        .then(res => {
          this.principals = res.data
        }).catch(err => {
          console.log(err)
        })

      //获取基础参数
      this.$api.order.service
        .params({
          params: { keys: ['types'] }
        })
        .then(res => {
          this.typesOptions = res.data.types
        }).catch(err => {
          console.log(err)
        })
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.toQuery()
    },
    handleSelectionChange(items) {
      this.serviceIds = [];
      items.forEach(element => {
        this.serviceIds.push(element.id)
      })
    },
    batchPullService() {
      this.$api.order.camp
        .pullService({
          data: { camp_id: this.campId, service_ids: this.serviceIds }
        })
        .then(res => {
          this.dialog = false
          this.$parent.$parent.handleTabClick()
          this.$notify({title: '成功',message: '批量拉取成功',type: 'success',duration: 2500})
        }).catch(err => {
          console.log(err)
        })
    },
    repeal() {
      this.query = {
        principal: '',
        order_type: '',
        start: '',
        end: '',
        page: 1,
        limit: 20,
      }
      this.datepicker = []
    }
  }
}
</script>

<style scoped>
  div{
    display: inline-block;
    margin-right: 3px;
  }
</style>
